<!DOCTYPE html>
<html lang="zh-cn">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="/css/bootstrap.min.css">
	<title>单个员工</title>

	<style>
		html, body{
			height: 100%;
		}

		div#container{
			min-height: 100%;
			width:100%;
			margin-bottom: -40px;
			padding-bottom: 40px;
		}

		table,
		td,
		th {
			border: 1px solid #7942C8;
		}
		
		th {
			background-color: #7942C8;
			color: white;
		}
	</style>

</head>

<!--<style>
	.button {
		background-color: #7942C8;
		border: none;
		color: white;
		border-radius: 10px;
		/*padding: 16px 32px;*/
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
		margin: 4px 4px;
		-webkit-transition-duration: 0.4s;
		/* Safari */
		transition-duration: 0.4s;
		cursor: pointer;
	}
	
	.button1 {
		background-color: white;
		color: black;
		border: 2px solid #7942C8;
	}
	
	.button1:hover {
		background-color: #7942C8;
		color: white;
	}
</style>-->

	<body>
		<div id="container" style="">
			<div id="header" style="height:85px;background-color:#7942C8; box-shadow: 0 2px 3px #AD94D2">
				<img src="/img/Logo2.png" height="65" width="340" style="position: absolute;	left: 9%; top: 1.6%;" alt="logo" />
					<button class="btn btn-default" style="background: transparent; margin-left: 87%; padding-top: 40px;">
						<a href="index.html" style="color: white;">退出</a>
					</button>
			</div>
			
			<div class="container" style="width: 60%; position: relative; float: left; left: 9%; top: 25px; bottom: 10px;">
				<div class="row">
					<div class="col-md-4"><h6 style="padding: 8px 0 0 0; display: inline-block;">姓名：</h6><%- @employee.name %></div>
					<!--<div class="col-md-1"></div>-->
					<div class="col-md-4"><h6 style="padding: 8px 0 0 0; display: inline-block;">工号：</h6><%- @employee.employee_id %></div>
					<div class="col-md-1">
					</div>
				</div>
			</div>
			<div>
				<button type="button" id="download" class="btn btn-default" id="btn_download"  style="background: transparent; color: #7942C8;  padding-top: 0; margin-left:87%"
						onClick="exportXls()">导出</button>
			</div>
			
			<div class="table-responsive" style="width: 50%; margin: 2% 0 0 9% ; ">
			<table id="table_export" class="table table-bordered table-hover table-sm" style="text-align:center">
				<thead class="table-light">
					<tr>
						<th scope="col">序号</th>
						<th scope="col">历史打卡时间</th>
						<th scope="col">类型</th>
					</tr>
				</thead>
				<tbody>
					<% for re in @records: %>
						<% d = new Date(re.createdAt) %>
						<% d = d.getFullYear().toString() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日" + "   " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()  %>
						<tr>
							<td><%- re.id %></td>
							<td><%- d %></td>
							<% if re.type == 1 : %>
								<td>签到</td>
							<% else : %>
								<td>签退</td>
							<% end %>
						</tr>
					<% end %>
				</tbody>
			</table>
			</div>
			
			<div>
				<div class="btn btn-default" style="background: transparent; margin-left: 55%; padding-top: 20px;cursor: default;">
					<a href="/token/home" style="color: #7942C8;">返回</a>
				</div>
			</div>
		</div>
		<div id="footer" style="height:40px; width: 100%; position:relative; bottom: 0px; background-color:#7942C8; clear:both;
				color:#FFFFFF; text-align:center; padding-top:10px; box-shadow: 0 -2px 3px #AD94D2;">copyright©2018dangdang
		</div>
	</body>
	<script src="/js/jquery-3.3.1.min.js"></script>
	<script src="/js/xls.core.min.js"></script>
	<script src="/js/FileSaver.min.js"></script>
	<script src="/js/tableExport.js"></script>
	<script type="application/javascript">
        function exportXls(){
            $("#table_export").tableExport({
                headings: true,                    // (Boolean), display table headings (th/td elements) in the <thead>
                footers: true,                     // (Boolean), display table footers (th/td elements) in the <tfoot>
                formats: "xls",    // (String[]), filetypes for the export
                fileName: "<%- @employee.name %>打卡记录",                    // (id, String), filename for the downloaded file
                bootstrap: false,                   // (Boolean), style buttons using bootstrap
                position: "bottom",                 // (top, bottom), position of the caption element relative to table
                ignoreRows: null,                  // (Number, Number[]), row indices to exclude from the exported file(s)
                ignoreCols: null,                  // (Number, Number[]), column indices to exclude from the exported file(s)
                ignoreCSS: ".tableexport-ignore",  // (selector, selector[]), selector(s) to exclude from the exported file(s)
                emptyCSS: ".tableexport-empty",    // (selector, selector[]), selector(s) to replace cells with an empty string in the exported file(s)
                trimWhitespace: false              // (Boolean), remove all leading/trailing newlines, spaces, and tabs from cell text in the exported file(s)
            });
        }
	</script>
</html>